﻿@model List<OnlineEducation.Data.Entities.ApplicationUser>
@{
    ViewData["Title"] = "教师管理";

}
@section Styles{

    @*<link href="~/assets/libs/dropify/dropify.min.css" rel="stylesheet" type="text/css" />*@
    <link href="~/assets/libs/jquery-upload/Huploadify.css" rel="stylesheet" type="text/css" />

    @*<link src="~/assets/libs/jquery-cropper/cropper.css" />*@


    <link href="~/assets/libs/flatpickr/flatpickr.min.css" rel="stylesheet" type="text/css" />

    @*<link href="~/assets/libs/clockpicker/bootstrap-clockpicker.min.css" rel="stylesheet" type="text/css" />
    <link href="~/assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" />*@

    <style>
        @@media (min-width: 576px) {
            .modal-dialog {
                max-width: 50% !important;
            }
           
        }
  
        .uploader {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            display: -webkit-flex; /* Safari */
            display: flex;
            /*    flex-direction: column;*/
            justify-content: flex-start;
        }

        .avatar {
            max-width: 100%;
            height: 150px;
            width: 150px;
            display: block;
            border-style: none;
            order: 0
        }

        .upload-section {
            order: 1;
        }

        .uploadify-button {
            display: inline-block;
            margin: 12px;
            line-height: 24px;
            border-radius: 0;
            padding: 0 18px;
            font-size: 12px;
            font-weight: inherit;
            font-family: inherit;
            cursor: pointer;
            text-decoration: none;
            color: #fff;
            background-color: #7e57c2;
            border-color: #7e57c2;
        }

            .uploadify-button:hover {
                color: #fff;
                background-color: #6a41b2;
                border-color: #643da9;
            }

    </style>
}

<!-- Start Content-->
<div class="container-fluid">



    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">

                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);"><i class="fa fa-map-marker-alt"></i></a></li>
                        <li class="breadcrumb-item"><a href="javascript: void(0);">教师信息</a></li>
                        <li class="breadcrumb-item active">/</li>
                    </ol>
                </div>
                <h4 class="page-title">教师信息</h4>
            </div>
        </div>
    </div>
    <!-- end page title -->
    <div class="row">
        <div class="col-12">
            <div class="card-box">

                <button onclick="ShowPopup('/Teacher/Add/')" type="button" class="btn btn-primary  waves-effect waves-light float-right ladda-button" data-style="expand-left">
                    新增教师
                </button>


                <h4 class="header-title mb-4">教师管理</h4>
                <div class="table-responsive" data-pattern="priority-columns" data-add-focus-btn="false"  data-add-display-all-btn="false" data-add-display-btn="false">
                    <table class="table table-small-font  table-striped" id="datatable" style="width:100%">
                        <thead>
                            <tr>
                                <th width="10%" data-priority="1">
                                    登录账号
                                </th>
                                <th width="10%" data-priority="1">姓名</th>
                                <th width="10%" data-priority="2">邮箱</th>
                                <th width="10%" data-priority="2">电话</th>
                                <th width="10%" data-priority="2">生日</th>
                                <th width="8%" data-priority="2">状态</th>
                                <th width="8%" data-priority="2">建立日期</th>
                                <th width="8%" class="hidden-sm" data-priority="1"></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div><!-- end col -->
    </div>
    <!-- end row -->

</div>
<div id="modalDefault" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">

        </div>
    </div>
</div><!-- /.modal -->
@section Scripts{
    @await Html.PartialAsync("_ValidationScriptsPartial")
    <script src="~/assets/libs/moment/moment.min.js"></script>
    @*<script src="~/assets/libs/jquery-cropper/cropper.js"></script>
    <script src="~/assets/libs/jquery-cropper/jquery-cropper.js"></script>*@
    @*<script src="~/assets/libs/dropify/dropify.min.js"></script>*@
    <script src="~/assets/libs/jquery-upload/jquery.Huploadify.js"></script>
    <script src="~/assets/libs/flatpickr/flatpickr.min.js"></script>
    <script src="~/assets/libs/flatpickr/zh.js"></script>
    @*<script src="~/assets/libs/clockpicker/bootstrap-clockpicker.min.js"></script>
    <script src="~/assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>*@
    <script>
      
        var table;

        $(function () {

         

            table = $('#datatable').DataTable({
                "oLanguage": {
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "对不起，没有匹配的数据",
                    "sInfo": "第 _START_ - _END_ 条 / 共 _TOTAL_ 条数据",
                    "sInfoEmpty": "没有匹配的数据",
                    "sInfoFiltered": "(数据表中共 _MAX_ 条记录)",
                    "sProcessing": "正在加载中...",
                    "sSearch": "全文搜索：",
                    "oPaginate": {
                        "sFirst": "第一页",
                        "sPrevious": " 上一页 ",
                        "sNext": " 下一页 ",
                        "sLast": " 最后一页 "
                    }
                },
                language: {
                    paginate:
                        { previous: "<i class='mdi mdi-chevron-left'>", next: "<i class='mdi mdi-chevron-right'>" }
                },
                drawCallback: function () {
                    $(".dataTables_paginate > .pagination").addClass("pagination-rounded");
                    $('.table-responsive').responsiveTable('update');
                },
                "responsive": true,
                "lengthChange": false,
                "searching": true,
                "order": [[6, 'desc']],
                "aoColumnDefs": [{ "bSortable": false, "aTargets": [1, 2, 3, 4, 5, 7] }],
                "serverSide": true,
                ajax: {
                    url: '/Teacher/GetAll',
                    type: 'POST',
                    async: true,
                    //headers: {
                    //    "XSRF-TOKEN": document.querySelector('[name="__RequestVerificationToken"]').value
                    //},
                    data: function (data) {

                        return {
                            param: data
                        };
                    },
                    error(jqXHR, textStatus, errorThrown) {

                        if (jqXHR.status == 401) {
                            ShowMessageError("会话过期，请重新登录");
                            setTimeout(function () {
                                window.location.href = "/Account/Login";
                            }, 2000);
                        } else {
                            ShowMessageError(jqXHR.responseText);
                        }
                    }
                },

                columns: [
                    {
                        title: "登录账号",
                        data: "UserName",
                        name: "UserName",

                    },
                    {
                        title: "姓名",
                        data: "FullName",
                        name: "FullName",

                    },
                    {
                        title: "邮箱",
                        data: "Email",
                        name: "Email"
                    },
                    {
                        title: "手机",
                        data: "PhoneNumber",
                        name: "PhoneNumber"
                    },
                    {
                        title: "生日",
                        data: "BirthDate",
                        name: "BirthDate",
                        render: function (data, type, row) {
                            return window.moment(data).format("YYYY-MM-DD");
                        }
                    },
                    {
                        title: "状态",
                        data: "Status",
                        name: "Status",
                        render: function (data, type, row) {

                            if (data == 1) {
                                return "<span class='badge badge-success'>正常</span>"
                            }
                            else {
                                return "<span class='badge badge-dark'>锁定</span>"
                            }
                        }
                    },
                    {
                        title: "建立日期",
                        data: "CreatedTime",
                        name: "CreatedTime",
                        render: function (data, type, row) {
                            return window.moment(data).format("YYYY-MM-DD HH:mm:ss");
                        }
                    },
                    {
                        title: "操作",
                        data: null,
                        name: "",
                        render: function (data, type, row) {

                            var html = "<div class='btn-group dropdown'>" +
                                "<a href='javascript: void(0);' class='table-action-btn dropdown-toggle arrow-none btn btn-outline-secondary waves-effect btn-sm' data-toggle='dropdown' aria-expanded='false'><i class='ti-menu'></i></a>" +
                                "<div class='dropdown-menu dropdown-menu-left'>" +
                                "<a class='dropdown-item' href='#' onclick='ShowPopup(\"/Teacher/View/" + row["Id"] + "\")'><i class='mdi mdi-eye mr-2 text-muted font-18 vertical-middle'></i>查看</a>" +
                                "<a class='dropdown-item' href='#' onclick='ShowPopup(\"/Teacher/Edit/" + row["Id"] + "\")'><i class='mdi mdi-pencil mr-2 text-muted font-18 vertical-middle'></i>修改</a>";

                            if (row["Status"] == 1) {
                                html = html + "<a class='dropdown-item' href='#' onclick='UpdateStatus(\"" + row["Id"] + "\")'><i class='mdi mdi-lock mr-2 text-muted font-18 vertical-middle'></i>锁定</a>";
                            } else {
                                html = html + "<a class='dropdown-item' href='#' onclick='UpdateStatus(\"" + row["Id"] + "\")'><i class='mdi mdi-key mr-2 text-muted font-18 vertical-middle'></i>解除锁定</a>";
                            }
                            html = html + "<a class='dropdown-item' href='#' onclick='ShowPopup(\"/Teacher/ChangePassword/" + row["Id"] + "\")'><i class='mdi mdi-textbox-password mr-2 text-muted font-18 vertical-middle'></i>修改密码</a>";
                            html = html + "<a class='dropdown-item' href='#' onclick='Remove(\"" + row["Id"] + "\")'><i class='mdi mdi-delete-forever mr-2 text-muted font-18 vertical-middle'></i>删除</a></div></div>";

                            return html;

                        }
                    }

                ]


            });
        });


        function ShowPopup(url) {
            $.get(url)
                .done(function (response) {

                    var modalId = 'modalDefault';

                    var modalPlaceholder = $('#' + modalId + ' .modal-dialog .modal-content');

                    modalPlaceholder.html(response);

                    popup = $('#' + modalId + '').modal({
                        keyboard: false,
                        backdrop: 'static'
                    });
                }) ;
        }

        function SubmitForm(form, url) {
            $(form).removeData('validator');
            $(form).removeData('unobtrusiveValidation');
            $.validator.unobtrusive.parse(form);
            if ($(form).valid()) {
                var data = $(form).serializeJSON();
                data = JSON.stringify(data);

                $.ajax({
                    type: 'POST',
                    url: url,
                    data: data,
                    contentType: 'application/json',
                    success: function (data) {
                        if (data.success) {
                            popup.modal('hide');
                            ShowMessage(data.message);
                            table.draw();

                        } else {
                            ShowMessageError(data.message);
                        }
                    } 
                });

            }
            return false;
        }

        function Remove(id) {


            Swal.fire({
                title: "删除",
                text: "确定删除?",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#dd4b39",
                confirmButtonText: "是的，删除!",
                cancelButtonText: "取消",
                icon: "warning",
                buttons: true,
                dangerMode: true,

            }).then(function (willdelete) {
                console.log(willdelete);
                if (!willdelete.value) return;
                $.ajax({
                    type: 'POST',
                    url: '/Teacher/Delete/' + id,
                    success: function (data) {
                        if (data.success) {
                            ShowMessage(data.message);
                            table.draw();
                        } else {
                            ShowMessageError(data.message);
                        }
                    } 
                });
            });


        }

        function UpdateStatus(id) {

            $.ajax({
                type: 'POST',
                url: '/Teacher/ChangeStatus/' + id,
                success: function (data) {
                    if (data.success) {
                        ShowMessage(data.message);
                        table.draw();
                    } else {
                        ShowMessageError(data.message);
                    }
                } 
            });



        }

    </script>
}
